<template>
  <md-app-toolbar class="md-primary static-top">
          <div class="md-toolbar-section-start">
            <md-button class="md-icon-button md-txg-menubtn" @click="menuVisible = !menuVisible">
              <md-icon>menu</md-icon>
            </md-button>

            <span class="md-title">{{siteName}}</span>
          </div>

          <div class="md-toolbar-section-end">
            <md-tabs class="md-primary">
            <md-tab id="tab-home" md-label="最新" to="/"></md-tab>
            <!--md-tab id="tab-pages" md-label="热门" to="/hot"></md-tab>
            <md-tab id="tab-posts" md-label="发现" to="/explore"></md-tab-->
            <md-tab :id="'tab-'+ index + '-' + cate.path" :md-label="cate.name" :to="'/' + cate.path + '/new'" v-for="(cate, index) in cates"></md-tab>
            </md-tabs>
            <div class="search-box">
            <md-autocomplete
              class="search"
              v-model="selectedEmployee"
              :md-options="employees"
              md-layout="box" @md-changed="search" :md-open-on-focus="false">
              <label>Search...</label>
            </md-autocomplete>
            </div>
            <div class="user-info">
            <md-button to="login" v-if="!auth">登录/注册</md-button>
            <!--md-avatar @click="logout" v-if="auth">
              <img :src="user.avatar" :alt="user.name">
            </md-avatar-->
            <md-menu md-size="medium" md-align-trigger v-if="auth">
                <md-avatar @click="logout" md-menu-trigger class="avatar">
                  <img :src="user.avatar" :alt="user.name">
                </md-avatar>

                <md-menu-content>
                  <md-menu-item to="/favorites">我的收藏</md-menu-item>
                  <md-menu-item @click="logout">退出登录</md-menu-item>
                </md-menu-content>
            </md-menu>
            </div>
          </div> 
  </md-app-toolbar>
</template>

<script>
  import TheEntry from '@/components/layouts/TheEntry'
export default {
  name: 'TheHeader',
  components: {
    TheEntry
  },
  data() {
    return {
      logo: {
        src: `${this.uploadsUrl}sites/ByvFbNlQYVwhvTyBgLdqitchoacDNznN.jpg`,
        title: 'VuejsCaff'
      },
      activeNavIndex: 1,
      siteName: this.$parent.siteName,
      tabRouter: true,
      showNavigation: false,
      cates: [
        {
          name: '女生',
          path: '/nvsheng'
        },
        {
          name: '男生',
          path: '/nansheng'
        },
        {
          name: '情侣',
          path: '/qinglv'
        },
        {
          name: '动漫',
          path: '/dongman'
        }
      ]
    }
  },
  beforeCreate() {
    this.uploadsUrl = 'https://vuejscaffcdn.phphub.org/uploads/'
  },
  methods: {
    changeNavIndex(index) {
      this.activeNavIndex = index
    },
    showNav() {
      this.showNavigation ? this.showNavigation = false : this.showNavigation = true
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~vue-material/dist/theme/engine";
  .title {
    display: none;
  }
  .topit-nav {
    margin-left: 126px;
  }
  .md-toolbar{
      .topit-active.md-button:not([disabled]):not(.md-raised) {
        color: md-get-palette-color(red, A200);
      }
  }
  .static-top {
    position: fixed;
    top: 0;
  }
  .md-drawer {
    width: 230px;
    max-width: calc(100vw - 125px);
  }
</style>
